<template>
  <div class="help-container">
    <!-- 帮助按钮 -->
    <button class="help-trigger" @click="togglePanel">
      <span class="help-icon">❓</span>
    </button>

    <!-- 帮助面板 -->
    <div class="help-panel" :class="{ 'active': isPanelOpen }">
      <div class="panel-header">
        <h3 class="panel-title">帮助中心</h3>
        <button class="close-btn" @click="closePanel">
          <span>✕</span>
        </button>
      </div>

      <div class="panel-content">
        <div class="help-sections">
          <!-- 快速入门 -->
          <div class="help-section">
            <h4 class="section-title">🚀 快速入门</h4>
            <div class="help-items">
              <div class="help-item" @click="showHelp('pos')">
                <span class="item-icon">💰</span>
                <div class="item-content">
                  <div class="item-title">如何开始收银</div>
                  <div class="item-desc">学习基本的收银操作流程</div>
                </div>
              </div>
              <div class="help-item" @click="showHelp('inventory')">
                <span class="item-icon">📦</span>
                <div class="item-content">
                  <div class="item-title">商品管理</div>
                  <div class="item-desc">添加、编辑和管理商品信息</div>
                </div>
              </div>
              <div class="help-item" @click="showHelp('members')">
                <span class="item-icon">👥</span>
                <div class="item-content">
                  <div class="item-title">会员管理</div>
                  <div class="item-desc">会员注册、查询和积分管理</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 常见问题 -->
          <div class="help-section">
            <h4 class="section-title">❓ 常见问题</h4>
            <div class="help-items">
              <div class="help-item" @click="showHelp('print')">
                <span class="item-icon">🖨️</span>
                <div class="item-content">
                  <div class="item-title">打印设置</div>
                  <div class="item-desc">配置小票打印机</div>
                </div>
              </div>
              <div class="help-item" @click="showHelp('backup')">
                <span class="item-icon">💾</span>
                <div class="item-content">
                  <div class="item-title">数据备份</div>
                  <div class="item-desc">备份和恢复系统数据</div>
                </div>
              </div>
              <div class="help-item" @click="showHelp('network')">
                <span class="item-icon">🌐</span>
                <div class="item-content">
                  <div class="item-title">网络连接</div>
                  <div class="item-desc">解决网络连接问题</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 快捷键 -->
          <div class="help-section">
            <h4 class="section-title">⌨️ 快捷键</h4>
            <div class="shortcuts-list">
              <div class="shortcut-item">
                <span class="shortcut-key">F1</span>
                <span class="shortcut-desc">快速收银</span>
              </div>
              <div class="shortcut-item">
                <span class="shortcut-key">F2</span>
                <span class="shortcut-desc">商品管理</span>
              </div>
              <div class="shortcut-item">
                <span class="shortcut-key">F3</span>
                <span class="shortcut-desc">会员管理</span>
              </div>
              <div class="shortcut-item">
                <span class="shortcut-key">Ctrl + S</span>
                <span class="shortcut-desc">保存</span>
              </div>
              <div class="shortcut-item">
                <span class="shortcut-key">Ctrl + P</span>
                <span class="shortcut-desc">打印</span>
              </div>
              <div class="shortcut-item">
                <span class="shortcut-key">Esc</span>
                <span class="shortcut-desc">取消/返回</span>
              </div>
            </div>
          </div>

          <!-- 联系支持 -->
          <div class="help-section">
            <h4 class="section-title">📞 联系支持</h4>
            <div class="support-info">
              <div class="support-item">
                <span class="support-icon">📧</span>
                <div class="support-content">
                  <div class="support-title">技术支持</div>
                  <div class="support-desc">support@pos-system.com</div>
                </div>
              </div>
              <div class="support-item">
                <span class="support-icon">📱</span>
                <div class="support-content">
                  <div class="support-title">客服热线</div>
                  <div class="support-desc">400-123-4567</div>
                </div>
              </div>
              <div class="support-item">
                <span class="support-icon">💬</span>
                <div class="support-content">
                  <div class="support-title">在线客服</div>
                  <div class="support-desc">工作日 9:00-18:00</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 帮助遮罩层 -->
    <div 
      class="help-overlay" 
      v-show="isPanelOpen"
      @click="closePanel"
    ></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 响应式数据
const isPanelOpen = ref(false)

// 切换面板
const togglePanel = () => {
  isPanelOpen.value = !isPanelOpen.value
}

// 关闭面板
const closePanel = () => {
  isPanelOpen.value = false
}

// 显示帮助内容
const showHelp = (topic) => {
  console.log('显示帮助主题:', topic)
  
  // 根据主题显示相应的帮助内容
  switch (topic) {
    case 'pos':
      alert('快速收银帮助：\n1. 点击"快速收银"按钮\n2. 扫描商品条码或手动输入\n3. 选择支付方式\n4. 完成交易')
      break
    case 'inventory':
      alert('商品管理帮助：\n1. 进入"商品管理"页面\n2. 点击"添加商品"按钮\n3. 填写商品信息\n4. 保存商品')
      break
    case 'members':
      alert('会员管理帮助：\n1. 进入"会员管理"页面\n2. 点击"添加会员"按钮\n3. 填写会员信息\n4. 保存会员')
      break
    case 'print':
      alert('打印设置帮助：\n1. 进入"系统设置"\n2. 选择"打印设置"\n3. 配置打印机参数\n4. 测试打印')
      break
    case 'backup':
      alert('数据备份帮助：\n1. 进入"数据备份"页面\n2. 选择备份类型\n3. 设置备份路径\n4. 执行备份')
      break
    case 'network':
      alert('网络连接帮助：\n1. 检查网络连接\n2. 确认服务器地址\n3. 检查防火墙设置\n4. 联系技术支持')
      break
    default:
      alert('帮助内容正在开发中...')
  }
}
</script>

<style scoped>
.help-container {
  position: relative;
}

.help-trigger {
  background: none;
  border: none;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.help-trigger:hover {
  background: #f5f7fa;
}

.help-icon {
  font-size: 18px;
  color: #606266;
}

/* 帮助面板 */
.help-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 500px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  max-height: 80vh;
  overflow-y: auto;
}

.help-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.panel-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.close-btn {
  background: none;
  border: none;
  color: #606266;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.close-btn:hover {
  background: #f5f7fa;
}

.panel-content {
  padding: 20px;
}

.help-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.help-section {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.help-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.help-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.help-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.help-item:hover {
  background: #f5f7fa;
}

.item-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
}

.item-content {
  flex: 1;
}

.item-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.item-desc {
  font-size: 12px;
  color: #606266;
}

/* 快捷键列表 */
.shortcuts-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 6px;
}

.shortcut-key {
  background: #e4e7ed;
  color: #606266;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: monospace;
}

.shortcut-desc {
  font-size: 12px;
  color: #606266;
}

/* 支持信息 */
.support-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.support-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f0f9ff;
  border: 1px solid #e0f2fe;
}

.support-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
}

.support-content {
  flex: 1;
}

.support-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.support-desc {
  font-size: 12px;
  color: #606266;
}

/* 帮助遮罩层 */
.help-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .help-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    border-radius: 0;
    transform: translateX(100%);
  }

  .help-panel.active {
    transform: translateX(0);
  }
}

@media (max-width: 480px) {
  .help-panel {
    width: 100%;
    max-width: none;
  }
  
  .shortcuts-list {
    grid-template-columns: 1fr;
  }
}
</style> 